<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>创建自定义的转场效果 Creating custom CSS-based transitions-JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile RC1版本中文站,Jquery mobile最新中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css"/>
<script type="text/javascript" src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<hr style="color:#595959;" />
<div class="content">
				<h1>创建自定义的基于css的转场效果 Creating custom CSS-based transitions</h1>
  <div class="desc"><strong></strong>
<div>如果想要创建一个自定义的css转场效果，选择一个与转场的DOM对应的class选择符，比如：“"slide"，然后使用csstransitions和关键帧动画定义自己的“in”和“out”的css规则。</div></div>
				<p class="indent"><strong>css代码</strong></p>
				<div class="code">
				  <p> .slide.in {<br>
　　-webkit-transform: translateX(0);<br>
　　-moz-transform: translateX(0);<br>
　　-webkit-animation-name: slideinfromright;<br>
　　-moz-animation-name: slideinfromright;<br>
}<br>
<br>
.slide.out {<br>
　　-webkit-transform: translateX(-100%);<br>
　　-moz-transform: translateX(-100%);<br>
　　-webkit-animation-name: slideouttoleft;<br>
　　-moz-animation-name: slideouttoleft;<br>
}</p>
				  <p> @-webkit-keyframes slideinfromright {<br>
				    　　from { -webkit-transform: translateX(100%); }<br>
				    　　to { -webkit-transform: translateX(0); }<br>
				    }<br>
  <br>
				    @-webkit-keyframes slideouttoleft {<br>
				    　　from { -webkit-transform: translateX(0); }<br>
				    　　to { -webkit-transform: translateX(-100%); }<br>
				    }<br>
  <br>
				    @-moz-keyframes slideinfromright {<br>
				    　　from { -moz-transform: translateX(100%); }<br>
				    　　to { -moz-transform: translateX(0); }<br>
				    }<br>
  <br>
				    @-moz-keyframes slideouttoleft {<br>
				    　　from { -moz-transform: translateX(0); }<br>
				    　　to { -moz-transform: translateX(-100%); }<br>
				    }</p>
                </div>
  <div class="desc">
<div>在页面转场过程中，jQuery Mobile会将转场的class 名放入转场的“来自”和“到达”的两个页面中。然后将"out"class 放入“来自”页面中，"out"class 放入“到达”页面中。</div>
<div>如果你的页面转场支持后退，你需要使用.reverse类，加到"in"和"out"类中 
</div>
</div>
				<p class="indent"><strong>css代码</strong></p>
				<div class="code">
				  <p> .slide.in.reverse {<br>
　-webkit-transform: translateX(0);<br>
　-moz-transform: translateX(0);<br>
　-webkit-animation-name: slideinfromleft;<br>
　-moz-animation-name: slideinfromleft;<br>
}</p>
				  <p> .slide.out.reverse {<br>
				    　-webkit-transform: translateX(100%);<br>
				    　-moz-transform: translateX(100%);<br>
				    　-webkit-animation-name: slideouttoright;<br>
				    　-moz-animation-name: slideouttoright;<br>
				    }</p>
				  <p> @-webkit-keyframes slideinfromleft {<br>
				    　from { -webkit-transform: translateX(-100%); }<br>
				    　to { -webkit-transform: translateX(0); }<br>
				    }</p>
				  <p> @-webkit-keyframes slideouttoright {<br>
				    　from { -webkit-transform: translateX(0); }<br>
				    　to { -webkit-transform: translateX(100%); }<br>
				    }<br>
  <br>
				    @-moz-keyframes slideinfromleft {<br>
				    　from { -moz-transform: translateX(-100%); }<br>
				    　to { -moz-transform: translateX(0); }<br>
				    }</p>
				  <p> @-moz-keyframes slideouttoright {<br>
				    　from { -moz-transform: translateX(0); }<br>
				    　to { -moz-transform: translateX(100%); }<br>
				    }</p>
    </div>
  <div class="desc">
<div>写好css规则之后，只需要给要导航的链接的data-transition属性指定为自己的css名字就可以了。</div>
	<p class="indent"><strong>html代码</strong></p>
				<div class="code">&lt;a href="#page2" data-transition="slide"&gt;Page 2&lt;/a&gt; </div>
	<div>当用户点击此链接时，jQuery Mobile会调用你自己写css转场。上面的css规则中都没有定义css animation的缓动或缓冲，是因为jQuery Mobile 的css中默认定义了.in, .out的css缓动</div>
	<div>当用户点击此链接时，jQuery Mobile会调用你自己写css转场。上面的css规则中都没有定义css animation的缓动或缓冲，是因为jQuery Mobile 的css中默认定义了.in, .out的css缓动</div>
</div>
				<p class="indent"><strong>css代码</strong></p>
				<div class="code">
				  <p> .in {<br>
　-webkit-animation-timing-function: ease-out;<br>
　-webkit-animation-duration: 350ms;<br>
　-moz-animation-timing-function: ease-out;<br>
　-moz-animation-duration: 350ms;<br>
}</p>
				  <p> .out {<br>
				    　-webkit-animation-timing-function: ease-in;<br>
				    　-webkit-animation-duration: 225ms;<br>
				    　-moz-animation-timing-function: ease-in;<br>
				    　-moz-animation-duration: 225;<br>
				    }</p>
    </div>
				<h1>创建自定义的基于css的转场效果 Creating custom CSS-based transitions</h1>
				<p class="indent"><strong>待补充</strong></p>
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



